<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg</title>
    <style>
      .svg {
        background-color: aliceblue;
      }
    </style>
  </head>
  <body>
    <!-- 
    SVG 纯HTML
   -->
    <svg class="svg" width="1400" height="400">
      <!-- 1.画线段 -->
      <!-- 
        x1 y1 是第一个点坐标
        x2 y2 是第二个点坐标
        stroke 绘制线段的样式
      -->
      <!-- 等腰三角形 -->
      <line x1="100" y1="100" x2="200" y2="200" stroke="#000"></line>
      <line x1="200" y1="200" x2="300" y2="100" stroke="#000"></line>
      <line x1="300" y1="100" x2="100" y2="100" stroke="#000"></line>
      <!-- 2.画折线 -->
      <!-- 
          points 依次传入点坐标，即可绘制
          默认填充
          描边修改填充透明度
       -->
      <polyline
        points="100 250,200 380, 300,250"
        stroke="#000"
        fill-opacity="0"
      ></polyline>
      <!-- 3.画矩形 -->
      <!-- 
        x y 左上角点坐标
        width 宽度
        height 高度
       -->
      <!-- <rect x="400" y="100" width="100" height="100" fill="green"></rect> -->
      <rect
        x="400"
        y="100"
        width="100"
        height="100"
        fill-opacity="0"
        stroke="#000"
      ></rect>
      <!-- 4.画圆 -->
      <!-- 
          cx cy 圆心点坐标
          r 半径
          style 样式
        -->
      <!-- <circle cx="650" cy="150" r="50" fill="yellow"></circle> -->
      <circle cx="650" cy="150" r="50" fill-opacity="0" stroke="#000"></circle>
      <!-- 5.画椭圆 -->
      <!-- 
          cx cy 圆心点坐标
          rx x轴半径
          ry y轴半径
       -->
      <!-- <ellipse cx="900" cy="150" rx="100" ry="50" fill="yellow"> </ellipse> -->
      <ellipse
        cx="900"
        cy="150"
        rx="100"
        ry="50"
        fill-opacity="0"
        stroke="#000"
      ></ellipse>
      <!-- 6.画任意 -->
      <!-- 
          M 移动到初始位置
          L 画线
          Z 将结束和开始点闭合
        -->
        <!-- 五角星 -->
      <path
        d="M 1100 150 , L 1300 150, L 1150 280,L 1200,80,L 1250 280 , Z"
        fill-opacity="0"
        stroke="#000"
      ></path>

      <!-- 使用阿里图标矢量图-->
      <svg
        t="1672286357077"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3556"
        width="50"
        height="200"
      >
        <path
          d="M896 576c0 17.632-14.336 32-32 32h-64v-192h64c17.664 0 32 14.368 32 32v128z m-448 192c0-35.296 28.704-64 64-64s64 28.704 64 64-28.704 64-64 64-64-28.704-64-64z m-224-160H160c-17.664 0-32-14.368-32-32v-128c0-17.632 14.336-32 32-32h64v192z m640-256h-65.888C782.176 208 660.224 96 512 96c-148.224 0-270.176 112-286.112 256H160c-52.928 0-96 43.072-96 96v128c0 52.928 43.072 96 96 96h128v-288c0-123.52 100.512-224 224-224s224 100.48 224 224v224a223.872 223.872 0 0 1-98.56 185.472A128.128 128.128 0 0 0 512 640c-70.592 0-128 57.408-128 128s57.408 128 128 128c137.024 0 251.456-95.776 280.64-224H864c52.928 0 96-43.072 96-96v-128c0-52.928-43.072-96-96-96z"
          fill="#8a8a8a"
          p-id="3557"
        ></path>
      </svg>
    </svg>
  </body>
</html>
